<template>
	<TabGrayEasyCard title="巡检监控" @onMore="goPage" :tabs="card.tabs" :curTab="card.curTab" :tabRight="card.tabRight" :grayCardList="card.grayCardList" @onChange="changeTab" v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">
		<hsPageTable :stripe="false" :isHaveIndex="false" :isHavePage="false" :tableData="tableData.data" :cloumns="tableData.columns" />
	</TabGrayEasyCard>
</template>

<script setup lang="jsx">
	import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard';
	import dashBoardApi from '@/api/Manage/Business/dashBoard';
	import { reportLog } from '@/utils/reportLog';
	import { reactive, watch } from 'vue';
	import { useRouter } from 'vue-router';

	const router = useRouter();

	const props = defineProps({
		permi: {
			type: String,
			required: false,
			default: '',
		},
		hideList: {
			type: Array,
			required: false,
		},
		biProjectCode: {
			type: String,
			required: true,
			default: '',
		},
		projectCode: {
			type: String,
			required: true,
			default: '',
		},
		projectName: {
			type: String,
			required: true,
			default: '',
		},
		updateDate: {
			type: String,
			required: false,
			default: '',
		},
	});

	let card = reactive({
		tabs: [
			{ label: '按日', value: 'date' },
			{ label: '按月', value: 'month' },
		],
		curTab: 'date',
		tabRight: '',
		grayCardList: [
			{ label: '安保完成率', value: '', unit: '%', color: '' },
			{ label: '保洁完成率', value: '', unit: '%', color: '' },
			{ label: '工程完成率', value: '', unit: '%', color: '' },
		],
	});

	watch(
		() => props.biProjectCode,
		() => {
			queryList();
		}, { immediate: true }
	);

	let tableData = reactive({
		data: [],
		columns: [
			{ prop: 'inspectionTypeName', label: '巡检类型', align: 'left' },
			{ prop: 'pointNum', label: '点位个数', align: 'right' },
			{ prop: 'unCompletePointNum', label: '昨日未完成', align: 'right' },
			{ prop: 'completePointNum', label: '昨日已完成', align: 'right' },
		],
	});

	const changeTab = value => {
		card.curTab = value;
		let decTxt = value == 'date' ? '昨日' : '当月';
		tableData.columns[2].label = decTxt + '未完成';
		tableData.columns[3].label = decTxt + '已完成';
		queryList();
	};
	
	function queryList() {
		dashBoardApi.queryInspectionMonitoryCardListApi({ projectCode: props.projectCode, queryTime: props.updateDate, queryTimeFlag: card.curTab == 'date' ? 1 : 2 }).then(res => {
			let resData = res.data;
			if (resData.code != 200) return;
			card.tabRight = card.curTab == 'month' ? resData.data.queryTime.slice(0, -3) : resData.data.queryTime;
			resData.data.list.forEach(item => {
				for (let i in item) {
					item[i] = item[i] === 0 ? String(item[i]) : item[i];
				}
			});
			tableData.data = resData.data.list || [];
			card.grayCardList[0].value = resData.data.securityCompleteRate;
			card.grayCardList[1].value = resData.data.cleanCompleteRate;
			card.grayCardList[2].value = resData.data.engineeringCompleteRate;
		});
	}

	function goPage() {
		reportLog({
			type: 4,
			resourceKey: props.permi,
		});
		router.push({
			path: '/page/routeController/index',
			query: {
				rid: 'page_query_inspection_route_detail_point_list',
				rTitle: '巡检路线',
				projectCode: props.projectCode,
				projectName: props.projectName,
				queryTime: props.updateDate,
				tabType: card.curTab
			},
		});
	}
</script>

<style scoped lang="scss">
	:deep(#my-table) {
		height: 100%;
		.el-scrollbar__view {
			height: 100%;
		}
		.img-icon {
			position: relative;
			top: 3px;
			width: 14px;
			margin: 0 2px;
		}
		.el-table__inner-wrapper {
			&::before {
				z-index: -1;
			}
		}
	}
</style>
